$space: uni;

.#{$space}-flex {
	display: flex;
}

@for $i from 0 through 24 {
	.#{$space}-flex-#{$i} {
		flex: #{$i}
	}
}

@each $direction in column, row {
	.#{$space}-flex-#{$direction} {
		flex-direction: #{$direction};
	}
}

@each $type in flex-start, center, flex-end {
	.#{$space}-align-#{$type} {
		align-items: #{$type};
	}
}

@each $type in flex-start, center, flex-end, space-between, space-around {
	.#{$space}-justify-#{$type} {
		justify-content: #{$type};
	}
}

@each $num in 0, 50, 100 {
	.#{$space}-h-#{$num} {
		height: #{$num} + '%';
	}
}

@each $num in 0, 50, 100 {
	.#{$space}-w-#{$num} {
		width: #{$num} + '%';
	}
}

